<template>
  <div class="home_view">
    <header class="header">
      <div class="logo">
        <i class="el-icon-platform-eleme icon"></i>
        <span class="text">监控系统后台</span>
      </div>
      <div class="logout_exit">
        <div class="user_info">{{ userName ? `欢迎您：${userName}` : '' }}</div>
        <el-button class="logout_exit_btn" round plain type="info" size="mini" @click="logout">
          <i class="el-icon-moon-night icon"></i>
          <span>退出登录</span>
        </el-button>
      </div>
    </header>
    <main class="main">
      <div class="left_side">
        <div class="title">前端性能监控</div>
        <el-menu
          default-active="1"
          class="side_menu el-menu-vertical-demo"
          background-color="#1e222d"
          text-color="#b1b6b8"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item v-for="(item, index) in sideList" :index="item.key" :key="index" class="side_menu_item" @click="changeTab(item)">
            <i :class="`menu_icon el-icon-${item.icon || 'menu'}`"></i>
            <span slot="title" class="side_menu_item_title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="right_view">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted,ref,getCurrentInstance,nextTick,watchEffect,reactive,Ref, toRefs, watch} from 'vue'
import { useRouter } from 'vue-router'
import ls from '@/lib/script/storage'
import metadata from '@/lib/script/metadata'
export default defineComponent({
  setup(){
    const router = useRouter()

    let userInfo = metadata.getUser();
    let userName = userInfo?.name || '';

    let sideList = [
      {
        name: '应用管理',
        key: '1',
        icon: 'copy-document',
        link: 'application',
      },
      {
        name: '团队管理',
        key: '2',
        icon: 'user',
        link: 'team',
      },
      {
        name: '页面性能',
        key: '3',
        icon: 'cpu',
        link: 'performance',
      },
      {
        name: '日志查询',
        key: '4',
        icon: 'notebook-2',
        link: 'queryLog',
      },
    ];
    let tabValue = '1';

    function logout(){
      ls.clear()
      router.push({name: 'login'})
    }
    function handleOpen(){
      console.log('handleOpen');
    }
    function handleClose(){
      console.log('handleClose');
    }
    function changeTab(item){
      router.push({name: item.link})
    }

    const state = {
      userName,
      tabValue,
      sideList,
      logout,
      handleOpen,
      handleClose,
      changeTab,
    }
    return reactive(state)
  }
})
</script>

<style lang='less' scoped>
.home_view {
  width: 100%;
  height: 100%;
  padding-top: 50px;

  header.header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #262f3e;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo {
      width: 175px;
      height: 50px;
      line-height: 50px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      .icon {
        font-size: 24px;
      }
      .text {
        font-size: 20px;
        font-weight: bold;
        margin-left: 8px;
      }
    }
    .logout_exit {
      padding: 0 10px;
      display: flex;
      align-items: center;
      .user_info {
        margin-right: 8px;
      }
    }
  }
  
  main.main {
    display: flex;
    height: 100%;
    position: relative;
    
    .left_side {
      width: 200px;
      height: 100%;
      background-color: #1e222d;
      .title {
        color: #fff;
        font-size: 20px;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #ddd;
      }
      :deep(.side_menu) {
        border-right: 0;
        .side_menu_item {
          font-size: 16px;
          display: flex;
          align-items: center;
          .side_menu_item_title {
            height: 18px;
            line-height: 18px;
          }
          .menu_icon {
            margin-right: 3px;
            margin-bottom: -2px;
            font-size: 18px;
          }
          &:not(.is-active) {
            .menu_icon {
              color: #7c878e;
            }
          }
        }
      }
    }
    .right_view {
      // flex: 1;
      position: absolute;
      left: 200px;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: #f3f4f7;
    }
  }

}
</style>